<template>
  <div class="accuracyRecord zy-content">
    <div class="title">
      <span>检测达成率</span>
      <div class="icon">
        <span class="creatBtnright" @click="importTask" v-if="checkBtnPermission.dcmAcctestDetailExport">
          <span><Icon type="ios-cloud-download-outline" color="#187BDB" /></span>
          <span class="rightbtn">导出检测达成率</span>
        </span>
      </div>
    </div>
    <div class="searchBox">
      <Form label-position="right" :label-width="150" class="search-form">
        <Row :gutter="16">
          <Col span="5">
            <FormItem label="所属公司：">
              <Select
                      v-model="searchParams.belongCompany"
                      filterable
                      clearable
                      :placeholder="`${$t('common.selectInfo')}`"
              >
                <Option
                        v-for="(item) of companyList"
                        :value="item.id"
                        :key="item.id"
                >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="保养周期：">
              <Select
                      v-model="searchParams.cycle"
                      filterable
                      clearable
                      :placeholder="`${$t('common.inputInfo')}`"
              >
                <Option
                        v-for="(item, index) of cycle"
                        :value="item.key"
                        :key="index"
                >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="检测计划">
              <Select
                      v-model="searchParams.planId"
                      filterable
                      clearable
                      :placeholder="`${$t('common.inputInfo')}`"
                      :remote-method="getCenterList"
                      :loading="loading"
              >
                <Option v-for="(item,index) of planList" :value="item.value" :key="index">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="本期任务生成时间：">
              <DatePicker
                      :value="dateRange"
                      type="daterange"
                      placement="bottom-end"
                      :placeholder="`${$t('common.selectInfo')}`"
                      @on-change="handleRangeChange"
              />
            </FormItem>
          </Col>
          <Col span="1">
            <Button type="primary" @click="changeNum" v-if="checkBtnPermission.dcmAcctestDetailList">{{$t('common.Query')}}</Button>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="tableContent">
      <Table
              ellipsis
              ref="selection"
              :columns="columns"
              :data="data"
              @on-selection-change="onSelectChange"
      >
        <template slot-scope="{ row }" slot="action">
          <span class="operationBtn" @click="edit(row)"
          ><Icon type="ios-eye-outline"></Icon>查看</span
          >
          <span class="operationBtn" @click="allot(row)"
          ><Icon type="arrow-swap"></Icon>分配</span
          >
          <span class="operationBtn" @click="deleteRow(row)"
          ><Icon type="ios-trash-outline"></Icon>删除</span
          >
        </template>
      </Table>
      <div class="pageWrap">
        <Page
                :total="total"
                :page-size="pageSize"
                :page-size-opts="$variable.pageSizes"
                :current="pageNum"
                @on-change="changePageNum"
                @on-page-size-change="changePageSize"
                show-sizer
                show-total

        />
      </div>
    </div>
  </div>
</template>

<script>
  import fileDownload from 'js-file-download'
export default {
  name: 'accuracyRecord',
  data() {
    return {
      loading: false,
      searchParams: {},
      checkBtnPermission: {},
      total: 0,
      pageSize: 10,
      pageNum: 1,
      pageSizeOption: [10, 20, 30, 40],
      dateRange: [],
      cycle: [
        { name: "全部", key: "" },
        { name: "日", key: "1" },
        { name: "周", key: "2" },
        { name: "月", key: "3" },
        { name: "季度", key: "4" },
        { name: "半年度", key: "5" },
        { name: "年度", key: "6" },
      ],
      plan: [
        { name: "全部", key: "" },
        { name: "设备检测计划1", key: "checkPlan1" },
        { name: "设备检测计划2", key: "checkPlan2" },
        { name: "设备检测计划3", key: "checkPlan3" },
      ],
      columns: [
        { title: "所属公司", key: "belongCompanyName", minWidth: 100 },
        { title: `${ this.$t('common.ProductionDescription') }`, key: "productionLine", minWidth: 200 },
        { title: `${ this.$t('fault.FunctionalLocation') }`, key: "orgName", minWidth: 300 },
        { title: "检测计划", key: "planName", minWidth: 200 },
        { title: "设备类别", key: "categoryName", minWidth: 100 },
        // { title: "点检位置", key: "checkPosition", width: 100 },
        { title: "检测方式", key: "maintainType", minWidth: 100 },
        // { title: "点检周期", key: "checkCycle", width: 100 },
        { title: "触发间隔", key: "intervalRate", minWidth: 100 },
        { title: "计划首次生成时间", key: "firstTime", minWidth: 200 },
        { title: "本期任务生成时间", key: "taskStartTime", minWidth: 200 },
        { title: "本期任务截止时间", key: "taskEndTime", minWidth: 200 },
        { title: "检测总数", key: "maintainNum", minWidth: 100 },
        { title: "已检测数量", key: "finishNum", minWidth: 100 },
        { title: "未检测数量", key: "unfinishNum", minWidth: 100 },
        { title: "检测达成率", key: "finishRate", minWidth: 100 },
      ],
      data: [],
      companyList: [],
      planList: []
    }
  },
  created() {
    this.getCompanyList()
    this.searchList()
  },
  mounted() {
    let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
    for(let item of itemList){
      if(item.code=="dcmAcctestDetailList"){
        this.checkBtnPermission.dcmAcctestDetailList = true
      }
      if(item.code=="dcmAcctestDetailExport"){
        this.checkBtnPermission.dcmAcctestDetailExport = true
      }


    }
  },
  methods: {
    //公司列表
    getCompanyList() {
      this.axios({
        method: 'get',
        url: '/basic/company/getCompanyListByUser',
        params: {}
      }).then(res => {
        if(res.code === 200){
          this.companyList = res.data
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    getCenterList(query) {
      if (query !== '') {
        this.loading = true
        this.axios({
          method: 'get',
          url: '/dms/dcmAcctestDetail/queryPlans',
          params: {
            planName: query
          }
        }).then(res => {
          if (res.code === 200) {
            this.planList = res.data
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
          }
        }).finally(() => {
          this.loading = false
        })
      }else {
        this.planList = []
      }

    },
    handleRangeChange(val) {
      this.searchParams.taskBeginTime_start = val[0]
      this.searchParams.taskBeginTime_end = val[1]
    },
    //分页
    changeNum(){
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val){
      this.pageNum = val;
      this.searchList();
    },
    searchList() {
      let params = {
        pageNo:this.pageNum,
        pageSize:this.pageSize,
      };
      for (let key in this.searchParams) {
        if (key === 'orgId' && this.searchParams['orgId']) {
          const arr = this.searchParams[key]
          const { length, last=length-1 } = arr
          this.$set(params, key, arr[last])
        }else {
          if (this.searchParams[key]) {
            this.$set(params, key, this.searchParams[key])
          }
        }

      }
      this.axios({
        method: 'get',
        url: '/dms/dcmAcctestDetail/list',
        params: params
      }).then(res => {
        
        if(res.code === 200){
          this.data = res.data.list
          this.total = res.data.total
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    importTask() {
      let params = {};
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key])
        }
      }
      const filName = '检测达成率'
      this.axios({
        method: 'get',
        url: '/dms/dcmAcctestDetail/export',
        responseType: 'blob',
        params: params
      }).then(res => {
        fileDownload(res, filName + '.xlsx')
      })
    },
    onSelectChange() {},
  }
}
</script>

<style lang="scss">
.accuracyRecord {
  background: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
    .icon {
      display: flex;
      .creatBtnright {
        display: flex;
        align-items: center;
        font-size: 16px;
        i {
          font-size: 36px;
        }
      }
    }
  }
}
</style>
